<template>
<div>
  <div class="top" v-if="isTopShow" >
    <div class="invoiceBtn fixedTop fixedTopBg" v-if="isExitTrucks">
      <div></div>
      <div>
          <el-button class="btnNo btns" >取消</el-button>
          <el-button class="btnAc btns" @click="addTrucks">确定</el-button>
        </div>
    </div>
    <div class="invoiceBtn fixedTop fixedTopBg" v-else>
        <div class="textInfo">
          <div class="fixedInfo">车头牌号: {{trucksData.header_license_vo.province}}{{trucksData.header_license_vo.number}}</div>
          <div class="fixedInfo" v-if="isBackResult">
            <p>[驳回理由]: {{backResult}}</p>
          </div>
        </div>
         <div  v-if="isCloseBtn">
          <el-button class="btnNo btnLange" @click="closePage">关闭</el-button>
        </div>
        <div v-if="saveBtn">
          <el-button class="btnNo btnLange" @click="deleteTrucks">取消</el-button>
          <el-button class="btnAc btnLange" @click="editTrucks">{{btnText}}</el-button>
        </div>
       
      </div>

  </div>
  <!-- 车辆提示审核信息 -->
  <div class="showFixed firstBox" v-if="isTipTrucks">
      <div class="invoiceBtn fixedTop fixedTopBg">
        <div class="textInfo">
        </div>
        <div>
          <el-button class="btnNo btns"  @click="closePage">关闭</el-button>
        </div>
      </div>
      <div class="detailMain" style="margin-top:72px;">
          <el-card :body-style="{ padding: '0' }">
            <div class="cardHead">
              <h3>录入车辆</h3>
            </div>
            <div class="padd73 reviewInfo">
              <p class="tip">提示*提示：该车数据已在网络货运平台存在，审</p>
              <p class="text"><span>车辆ID:{{trucksData.cid}}</span><i>已有数据共享中</i></p>
              <p class="text"><span>车头牌号:{{trucksData.header_license_vo.licence}}</span></p>
            </div>
            
          </el-card>
      </div>
  </div>
  <el-form :model="trucksData" v-else :rules="trucksRules" ref="trucksRef" :disabled="disAbled" class="trucksFrom">
    <div class="showFixed firstBox" v-if="isExitTrucks">
      <div class="detailMain" style="margin-top:72px;">
          <el-card :body-style="{ padding: '0' }">
            <div class="cardHead">
              <h3>录入车辆</h3>
            </div>
            <div class="padd73">
              <el-row :gutter="0">
                <el-form-item label="车头牌号" label-width="79px"  prop="header_license_vo.province" >
                    <el-select v-model="trucksData.header_license_vo.province"  placeholder="请选择" style="width:90px">
                      <el-option
                          v-for="item in provinceType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="8" :offset="0">
                  <el-form-item  prop="header_license_vo.number" style="width:100%;margin-left: -2px;" class="noBorderLeft">
                    <el-input placeholder="请输入内容" v-model="trucksData.header_license_vo.number"  class="input-with-select">
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
      </div>
    </div>

    <!-- 车辆信息录入 -->
    <div class="detailWrap showFixed" v-if="allInfo">
      <div class="detailMain">
          <div v-if="isShareTrucks">
            <el-card :body-style="{ padding: '0' }" :style="{marginTop:marginTop}">
            <div class="cardHead">
              <h3>车辆基础信息</h3>
            </div>
            <div class="padd73">
              <el-row :gutter="0">
                <el-col :span="11" :offset="0" style="display:flex;">
                  <el-form-item label="车头排号" label-width="107px"  prop="header_license_vo.province" style="display: inline-block;float: left;" >
                      <el-select disabled v-model="trucksData.header_license_vo.province" placeholder="请选择" style="width:90px">
                        <el-option
                          v-for="item in provinceType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-col :span="16" :offset="0"  style="width: 70.3%;">
                    <el-form-item  prop="header_license_vo.number" style="width:100%;margin-left: -2px;" class="noBorderLeft">
                      <el-input disabled placeholder="请输入内容"  v-model="trucksData.header_license_vo.number" class="input-with-select">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="11" :offset="1"  style="display:flex;">
                  <el-form-item
                  label="挂车牌号" 
                  label-width="107px"   
                  style="display: inline-block;float: left;" 
                  :rules="[{required:trucksData.tail_license_vo.number!=''? true:false,message:'请选择省份简称'}]"
                        prop="tail_license_vo.province" 
                  >
                      <el-select v-model="trucksData.tail_license_vo.province"  placeholder="请选择" style="width:90px">
                        <el-option
                        
                          v-for="item in provinceType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label">
                        </el-option>
                      </el-select>
                  </el-form-item>
                  <el-col :span="16" :offset="0" style="width: 70.3%;">
                    <el-form-item 
                    :rules="[
                    {required:trucksData.tail_license_vo.province!=''? true:false,message:'请选择输入挂车牌号'},
                    { pattern:/[A-Za-z]{1}[A-Za-z0-9]{4}[挂]{1}$/, message: '请输入正确车牌号', trigger: 'blur' },
                    {min:6,max:6, message: '请输入正确车牌号', trigger: 'blur' },
                    ]"
                    prop="tail_license_vo.number" 
                    style="width:100%;margin-left: -2px;" 
                    class="noBorderLeft">
                      <el-input placeholder="请输入内容" v-model="trucksData.tail_license_vo.number" class="input-with-select">
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="所属人" label-width="107px"  prop="owner">
                    <el-input placeholder="请输入所属人" v-model="trucksData.owner"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="发动机号码" label-width="107px"  prop="code">
                    <el-input placeholder="请输入发动机号码" v-model="trucksData.code"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="车辆长度" label-width="107px"  prop="volume">
                    <el-input placeholder="请输入车辆长度" v-model="trucksData.volume">
                      <i slot="suffix" class="inputSlot">mm</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="车牌颜色" label-width="107px"   prop="licensecolor">
                    <el-select  placeholder="请选择车牌颜色" filterable  v-model="trucksData.licensecolor">
                      <el-option
                        v-for="item in licenseColor"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item label="总质量" label-width="107px"  prop="total_weight">
                    <el-input placeholder="请输入总质量" v-model="trucksData.total_weight" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"><i slot="suffix" class="inputSlot">kg</i></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="整备质量" label-width="107px"  prop="curb_weight">
                    <el-input placeholder="请输入整备质量" v-model="trucksData.curb_weight" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="0">
                  <el-form-item label="核定载质量" label-width="107px"   prop="verification_weight">
                    <el-input placeholder="请输入核定载质量"  v-model="trucksData.verification_weight" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"><i slot="suffix" class="inputSlot">kg</i></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="准牵引总质量" label-width="107px"  prop="tow_weight">
                    <el-input placeholder="请输入准牵引总质量"  v-model="trucksData.tow_weight" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"><i slot="suffix" class="inputSlot">kg</i></el-input>
                  </el-form-item>
                </el-col>
                  <el-col :span="11" :offset="0">
                  <el-form-item label="车辆识别码" label-width="107px"   prop="identify">
                    <el-input placeholder="请输入车辆识别码"  v-model="trucksData.identify"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="车辆类型" label-width="107px"  prop="type">
                    <el-select  placeholder="请选择车辆类型"  v-model="trucksData.type" >
                      <el-option
                        v-for="item in tucksType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                  <el-col :span="11" :offset="0">
                  <el-form-item label="车辆使用性质" label-width="107px"   prop="nature">
                    <el-select  placeholder="请选择车辆使用性质" v-model="trucksData.nature">
                      <el-option
                        v-for="item in trucksSellType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                  <el-form-item label="能源类型" label-width="107px"  prop="energy_type">
                    <el-select  placeholder="请选择能源类型" v-model="trucksData.energy_type">
                      <el-option
                        v-for="item in energyType"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          
          </div>
          <!-- 司机基础信息 -->
          

          <!-- 车辆证件信息 -->
          <el-card :body-style="{ padding: '0' }" v-if="isimgTrucks">
            <div class="cardHead">
              <h3>车辆证件信息</h3>
            </div>
            
            <!-- 行驶证信息 -->
            <p class="titlebox"><span><i>行驶证</i></span></p>
            <div class="padd12"> 
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="发证机关" label-width="108px" prop="truck_certificates_vo.office">
                    <el-input placeholder="请输入发证机关"  v-model="trucksData.truck_certificates_vo.office"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="发证日期" label-width="108px"  prop="truck_certificates_vo.release_time">
              
                  <el-date-picker
                  v-model="trucksData.truck_certificates_vo.release_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择发证日期">
                </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="注册日期" label-width="108px" prop="truck_certificates_vo.reg_time">
            
                  <el-date-picker
                  v-model="trucksData.truck_certificates_vo.reg_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择注册日期">
                </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="行驶证主页" label-width="108px" prop="truck_certificates_vo.driving_main_pic">
                    <div class="uploadBox" :class="{disabled:disAbled}">
                      <input
                        type="file"
                        ref="inputThreeRef"
                        @change="getImgThree($event)"
                        name="file"
                        :disabled="disAbled"
                        accept="image/*"
                        class="icon_input"
                        value="+"
                      />
                      <div class="previewOne" v-if="!desImg.desThreeImg"><span @click="previewThree">预览</span><span @click="editImgThree">修改</span></div>
                      <div class="uploadImg">
                        <img :src="imgUpload.imgThreeUrl" class="" />
                      </div>
                      <div class="desText" v-if="desImg.desThreeImg">
                        <img src="@a/images/zx.png" alt="">
                        <h3>点击上传行驶证主页</h3>
                        <span>格式不限，大小2M以内</span>
                        </div>
                      <el-dialog :visible.sync="dialogShow.dialogThree">
                        <img width="100%" :src="dialogUrl.dialogThreeUrl" alt="">
                      </el-dialog>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="行驶证副页" label-width="108px" prop="truck_certificates_vo.driving_sub_pic">
                    <div class="uploadBox" :class="{disabled:disAbled}" >
                      <input
                        type="file"
                        ref="inputFourRef"
                        @change="getImgFour($event)"
                        name="file"
                        accept="image/*"
                        :disabled="disAbled"
                        class="icon_input"
                        value="+"
                      />
                      <div class="previewOne" v-if="!desImg.desFourImg">
                        <span @click="previewFour">预览</span><span @click="editImgFour">修改</span>
                        </div>
                      <div class="uploadImg">
                        <img :src="imgUpload.imgFourUrl" class="" />
                      </div>
                      <div class="desText" v-if="desImg.desFourImg">
                        <img src="@a/images/zx.png" alt="">
                        <h3>点击上传行驶证副页</h3>
                        <span>格式不限，大小2M以内</span>
                        </div>
                      <el-dialog :visible.sync="dialogShow.dialogFour">
                        <img width="100%" :src="dialogUrl.dialogFourUrl" alt="">
                      </el-dialog>
                    </div>
                  </el-form-item>
                </el-col>
                
              </el-row>
            </div>
            <!-- 道路运输证信息 -->
            <p class="titlebox"><span><i>道路运输证</i></span></p>
            <div class="padd12"> 
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="道路运输证号" label-width="108px" prop="truck_certificates_vo.transport_num">
                  <el-input placeholder="请输入道路运输证号" v-model="trucksData.truck_certificates_vo.transport_num"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  <el-form-item label="道路运输证有效期" label-width="142px" prop="truck_certificates_vo.transport_valid_time">
              
                  <el-date-picker
                  v-model="trucksData.truck_certificates_vo.transport_valid_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择道路运输证有效截止日期">
                </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                  <el-form-item label="道路运输证" label-width="108px" prop="truck_certificates_vo.transport_pic">
                    <div class="uploadBox" :class="{disabled:disAbled}">
                      <input
                        type="file"
                        ref="inputFiveRef"
                        @change="getImgFive($event)"
                        name="file"
                        accept="image/*"
                        :disabled="disAbled"
                        class="icon_input"
                        value="+"
                      />
                      <div class="previewOne" v-if="!desImg.desFiveImg"><span @click="previewFive">预览</span><span @click="editImgFive">修改</span></div>
                      <div class="uploadImg">
                        <img :src="imgUpload.imgFiveUrl" class="" />
                      </div>
                      <div class="desText" v-if="desImg.desFiveImg">
                        <img src="@a/images/zx.png" alt="">
                        <h3>点击上传道路运输证图片</h3>
                        <span>格式不限，大小2M以内</span>
                        </div>
                      <el-dialog :visible.sync="dialogShow.dialogFive">
                        <img width="100%" :src="dialogUrl.dialogFiveUrl" alt="">
                      </el-dialog>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                  
                </el-col>
                
              </el-row>
            </div>
          </el-card>
      </div>
    </div>
  </el-form>

</div>
</template>

<script>
import {trucksRules} from '@t/trucksRules.js'
import merge from 'deepmerge'
import { tucksType,energyType,trucksSellType,provinceType,licenseColor} from '@t/trucksType.js' 
export default {
  components: {},
  data () {
    return {
      id:'',
      marginTop:'72px',
      trucksId:'',
      btnText:'确认新增',
      tucksType:tucksType, //车辆类型
      energyType:energyType,   //能源类型
      trucksSellType:trucksSellType,    //车辆使用性质
      provinceType:provinceType,    //车牌省份
      licenseColor:licenseColor,       //车牌颜色
      trucksRules:trucksRules,    //表单校验
      trucksData:{
        id:'',      //车辆id
        header_license_vo:{    //挂车牌号
          number:'',     //车牌号
          province:'',    //省简称
        },
        tail_license_vo:{    //挂车牌号
          number:'',     //车牌号
          province:'',    //省简称
        },
        owner:'',     //所属人
        code:'',     // 发动机号码
        volume:'',     //车辆长度
        licensecolor:'',     //车牌颜色
        total_weight:'',     //总质量
        curb_weight:'',     //整备质量
        verification_weight:'',     //核定载质量
        tow_weight:'',     //准牵引总质量
        identify:'',     //车辆识别码 
        type:'',     //车辆类型 
        nature:'',     //车辆使用性质
        energy_type:'',     //能源类型
        truck_certificates_vo:{
          office:'',      //发证机关
          release_time:'',      //发证日期
          reg_time:'',      //注册日期 
          driving_main_pic:'',      //行驶证主页
          driving_sub_pic:'',      //行驶证副页
          transport_num:'',      //道路运输证号
          transport_valid_time:'',      //道路运输证有效期 
          transport_pic:'',      //道路运输证
        },
        status:'',      //状态
        status_vo:{
          value:''
        }

      },
      imgUpload:{
        imgThreeUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgFourUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
        imgFiveUrl: 'http://fat.teyunquan.com/front/imgBg.a2d103f.png',
      },
      desImg:{
        desThreeImg:true,
        desFourImg:true,
        desFiveImg:true
      },
      dialogShow:{
        dialogThree:false,
        dialogFour:false,
        dialogFive:false
      },
      dialogUrl:{
        dialogThreeUrl:'',
        dialogFourUrl:'',
        dialogFiveUrl:''
      },
      imgLoading:{
        imgLoadingOne:false,
        imgLoadingTwo:false,
        imgLoadingThree:false,
      },
      disAbled:false,    //表单是否可编辑
      isExitTrucks:true,     //判断车辆是否存在
      isShareTrucks:true,     //车辆共享信息显示
      isTipTrucks:false,     //车辆共享信息
      isimgTrucks:false,     //车辆证件信息
      isCloseBtn:false,// 关闭按钮显示
      backWrong:false,
      saveBtn:false,
      isTopShow:false,
      allInfo:false,
      isBackResult:false,
      backResult:'',

    };
  },
 
  created () {
    if(this.$route.params.type || sessionStorage.getItem('lookType') ){
      this.$store.commit('lookType', sessionStorage.getItem('lookType'));
    }

    if(this.$route.params.id || sessionStorage.getItem('truckId') ){
      this.$store.commit('setTrucksId', sessionStorage.getItem('truckId'));
      this.id=sessionStorage.getItem('truckId')
      this.isExitTrucks=false
      this.getTrucksInfo()
    }else{
      this.isTopShow=true
    }
  },
  filters: {
    upper: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.toUpperCase();
    }
  },
  methods: {
    //判断车牌号是否存在  trucksRef
    addTrucks(){
      const data=this.trucksData
      const loading=this.$loading({
        lock: true,
          text: '正在查询信息...',
          spinner: 'el-icon-loading',
      })
      let isError = 0;
      this.$refs.trucksRef.validateField(['header_license_vo.number','header_license_vo.province'], (Error) => {
        if (Error) {
            isError=1
            this.$message.warning("请填写信息后进行下一步")
        }
      });
      if(isError === 0){
        this.$http.companyApi.addTrucks(data).then(res => {
          console.log(res);
          this.id=res.data.id
          this.$store.commit('setTrucksId', res.data.id);
          this.trucksData.status=res.data.value
          //新增信息
          if(res.data.belong == 'INPUT'){
            this.isTopShow = true
            this.isExitTrucks = false
            this.isCloseBtn = false
            this.saveBtn = true
            this.btnText = "确认新增"
            this.allInfo = true
            this.isShareTrucks = true
            this.isimgTrucks = true
            sessionStorage.setItem('trucksInfo',JSON.stringify(this.trucksData))
          }else if(res.data.belong == 'PUBLIC_DETAIL'){
            this.isTopShow = true
            this.isExitTrucks = false
            this.isCloseBtn = true
            this.saveBtn = false
            this.allInfo = true
            this.isShareTrucks = true
            this.isimgTrucks = false
            this.disAbled=true
            this.getTrucksInfo()
          }else if(res.data.belong == 'REASON'){
            this.isTopShow = false
            this.isExitTrucks = false
            this.isTipTrucks = true
          }
          loading.close()
        }).catch(err => {
          loading.close()
          this.$message.warning(err.data.err_msg)
        })
      }
    },
    // 获取车辆信息
    async getTrucksInfo(){
      const loading=this.$loading({
        lock: true,
          text: '正在获取车辆信息...',
          spinner: 'el-icon-loading',
      })
      const res= await this.$http.companyApi.trucksInfo(this.id);
      if(res.status==200){
        console.log(res);
        const data = merge(this.trucksData, res.data)
        this.trucksData=data
        this.trucksData.status=res.data.status_vo.value
        if(this.$store.state.lookType && this.$store.state.lookType =='trucks' || sessionStorage.getItem('lookType') && sessionStorage.getItem('lookType')=='trucks'){
          this.disAbled=true
          this.isCloseBtn=true
          this.isExitTrucks = false
          console.log(5555);
          if(res.data.status_vo.belong == 'INPUT' || res.data.status_vo.belong == 'PRIVATE_DETAIL'){
          this.isTopShow=true
            this.isShareTrucks = true
            console.log(333);
            this.allInfo = true
            this.isimgTrucks = true
            
          }else if(res.data.status_vo.belong == 'PUBLIC_DETAIL'){
            this.isShareTrucks = true
          this.isTopShow=true
            this.isimgTrucks = false
            this.allInfo = true
            console.log(2222);
          }else if(res.data.status_vo.belong == 'REASON'){
           this.isTopShow = false
            this.isExitTrucks = false
            this.isTipTrucks = true
            this.allInfo = false
            console.log(1111);
          }
        }else{
          this.isExitTrucks = false
          if(res.data.status_vo.belong == 'PRIVATE_DETAIL'){
            this.isTopShow = true
            this.isShareTrucks = true
            this.isimgTrucks = true
            this.allInfo = true
            if(res.data.status_vo.value == 'NO_SUBMIT'){
              sessionStorage.setItem('trucksInfo',JSON.stringify(this.trucksData))
              this.saveBtn=true
              this.isCloseBtn=false
              this.btnText = "保存"
            }else if(res.data.status_vo.value=='APPROVE_FAIL'){
               sessionStorage.setItem('trucksInfo',JSON.stringify(this.trucksData))
              this.saveBtn=true
              this.isCloseBtn=false
              this.btnText = "保存"
              this.isBackResult=true
              this.backResult=res.data.status_vo.context
            }else{
              this.saveBtn=false
              this.isCloseBtn=false
              this.disAbled=true
            }
          }else if(res.data.status_vo.belong == ' PUBLIC_DETAIL'){
          this.isTopShow = true
            this.saveBtn=false
            this.isCloseBtn=true
            this.isShareTrucks = true
            this.isimgTrucks = false
            this.disAbled=true
          }else if(res.data.status_vo.belong == ' REASON'){
           this.isTopShow = false
            this.isExitTrucks = false
            this.isTipTrucks = true
          }
        }
           loading.close()
        
        this.trucksData.type=res.data.type_vo.name
        console.log(this.trucksData);
        if(this.trucksData.truck_certificates_vo.driving_main_pic &&this.trucksData.truck_certificates_vo.driving_main_pic!=''){
          this.imgUpload.imgThreeUrl = this.trucksData.truck_certificates_vo.driving_main_pic
          this.desImg.desThreeImg=false
        }
        if(this.trucksData.truck_certificates_vo.driving_sub_pic && this.trucksData.truck_certificates_vo.driving_sub_pic!=''){
          this.imgUpload.imgFourUrl = this.trucksData.truck_certificates_vo.driving_sub_pic
          this.desImg.desFourImg=false
        }
        if(this.trucksData.truck_certificates_vo.transport_pic && this.trucksData.truck_certificates_vo.transport_pic!=''){
          this.imgUpload.imgFiveUrl = this.trucksData.truck_certificates_vo.transport_pic
          this.desImg.desFiveImg=false
        }
        //  this.trucksData= this.trucksData
      }
    },
    //修改车辆信息
    editTrucks(){
      const data=this.trucksData
      console.log(data);
      this.$refs.trucksRef.validate((valid) => {
        if (valid) {
          const loading=this.$loading({
            lock: true,
              text: '信息提交中...',
              spinner: 'el-icon-loading',
          })
          this.$http.companyApi.editTrucks(data,this.$store.state.truckId).then(res => {
            if(res.status == 200){
              loading.close()
              this.$message.success("提交成功")
              this.$router.push('/truck')
            }
          }).catch(err => {
            loading.close()
            this.$message.error("信息提交失败,请重新提交")
          })

        }else{
          this.$message.warning("请完整填写表单信息")
          console.log(valid);
        }
      });
    },

    //取消按钮
    deleteTrucks(){
      console.log(123);
      const oldVal=sessionStorage.getItem("trucksInfo")
      if(oldVal == JSON.stringify(this.trucksData)){
        sessionStorage.removeItem("trucksInfo")
        this.$router.go(-1);//返回上一层
      }else{
        this.$confirm('取消后已填写内容将不会被保存，确认继续该操作吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.removeItem("trucksInfo")
          this.$router.go(-1);//返回上一层
        })
      }
    },

    closePage(){
      this.$router.go(-1)
    },
    
  
    // 上传驾驶证主页预览
    previewThree() {
      this.dialogShow.dialogThree=true
      this.dialogUrl.dialogThreeUrl=this.imgUpload.imgThreeUrl
    },
    // 上传驾驶证副页预览
    previewFour() {
      this.dialogShow.dialogFour=true
      this.dialogUrl.dialogFourUrl=this.imgUpload.imgFourUrl
    },
    // 上传从业资格证预览
    previewFive() {
      this.dialogShow.dialogFive=true
      this.dialogUrl.dialogFiveUrl=this.imgUpload.imgFiveUrl
    },


  
    //上传驾驶证主页修改
    editImgThree(){
      this.$refs.inputThreeRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传驾驶证副页修改
    editImgFour(){
      this.$refs.inputFourRef.dispatchEvent(new MouseEvent('click'))
    },
    //上传从业资格证修改
    editImgFive(){
      this.$refs.inputFiveRef.dispatchEvent(new MouseEvent('click'))
    },
   
     //上传驾驶证主页
    getImgThree(e){
      const imgpic = e.target.files[0];
      
      this.uploadType(imgpic,'imgThreeUrl','desThreeImg','imgLoadingThree','driving_main_pic')
      return false;
    },
    //上传驾驶证副页
    getImgFour(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFourUrl','desFourImg','imgLoadingFour','driving_sub_pic')
      return false;
    },
    //上传上传从业资格证
    getImgFive(e){
      const imgpic = e.target.files[0];
      this.uploadType(imgpic,'imgFiveUrl','desFiveImg','imgLoadingFive','transport_pic')
      return false;
    },
    // 判断文件上传类型大小
    uploadType(file,imgShow,desImg,loading,uploadimg){
      const isImg = file.type === 'image/jpeg' 
      // const isImg = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isImg) {
        this.$message.warning("上传图片只能是 JPG/JPEG/PNG/GIF 格式!")
        return false
      }
      if (!isLt5M) {
        this.$message.warning("上传图片大小不能超过5M")
        return false
      }
      this.imgLoading[loading]=true
      let formData=new FormData();
      formData.append("file",file)
      formData.append("type",'TRUCK')
      this.$http.companyApi.uploadImg(formData)
      .then(res => {
        if(res.status == 201){
          console.log(res);
          this.$message.success("上传成功")
          this.imgLoading[loading]=false
          this.trucksData.truck_certificates_vo[uploadimg]=res.data
          
          // 
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
          const ImgBase64 = reader.result;
          // 实现预览，实际是拿到图片的base64数据去挂在到图片的src上
          console.log(ImgBase64);
          this.imgUpload[imgShow]=ImgBase64
          this.desImg[desImg]=false
        };

          // this.driversData.identification_front_pic=res.data
        }
      })
      return false
    }
  },
   beforeRouteLeave (to, from, next) {
    sessionStorage.removeItem("trucksInfo")
    sessionStorage.removeItem("truckId")
    this.$store.commit('lookType', '');
    sessionStorage.removeItem("lookType")
    next()
  }
}

</script>

<style scoped>
.detailMain .el-card{
  margin-bottom: 24px;
}
.titlebox{
  padding: 16px 24px;
}
.titlebox span{
  display: inline-block;
  padding: 0 11px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: rgba(250, 101, 0, 0.1);
  border-radius: 4px;
  transform: skew(-10deg);
}
.titlebox span i{
  font-size: 14px;
  color: #FA6500;
  display: block;
  transform: skew(10deg);
}
.radiolist{
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}
.radiolist .el-radio{
  height: 40px;
  line-height: 40px;
}
.radioDate{
  display: flex;
}
.uploadBox{
  width:343px;
  height:217px;
  border: 1px dashed #BFC4D3;
  border-radius: 4px;
  padding: 8px;
  position: relative;
}
.uploadBox:hover .previewOne{
  display: flex;
  transition: all .35s;  
}
.uploadBox input{
  width: 100%;
  height: 100%;
  cursor: pointer;
  position: relative;
  z-index: 1;
  opacity: 0;
}
.uploadBox .uploadImg{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  opacity: 1;
  z-index: 0;
}
.uploadBox .uploadImg img{
  width: 100%;
  object-fit: fill;
  width: 100%;
  height: 100%;
}
.uploadBox .desText{
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  text-align: center;
}
.uploadBox .desText img{
  width: 60px;
  height: 60px;
  margin: 29px auto 0 auto;
}
.uploadBox .desText h3{
  color: #171717;
  font-size: 16px;
}
.uploadBox .desText span{
  color: #716E6E;
  font-size: 12px;
  display: block;
  line-height:20px;
}
.uploadBox .previewOne{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  color: #fff;
  display: none;
  transition: all .35s;  
}
.uploadBox .previewOne span{
  cursor: pointer;
}
.reviewInfo .tip{
  font-size:12px;
  color: #F5222D;

}
.reviewInfo p span{
  color: #181C27;
  margin-right: 5px;
  display: inline-block;
}

.reviewInfo p.text{
  margin-top: 10px;
}
.reviewInfo p.text i{
  font-size: 12px;
  color: #fff;
  background: #51D25A;
  padding: 2px 9px;
  border-radius: 4px;
  display: inline-block;
}
.firstBox .el-form-item{float: left; }
</style>